//  1.animation？transform？
/**
 * Transform:它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
 * Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值.animation-duration：规定完成动画所花费的时间，以秒或毫秒计。
 */

//  2.position
/**
 * static（默认）：按照正常文档流进行排列；
 * relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
 * absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
 * fixed(固定定位)：所固定的参照对像是可视窗口。
 */

//  3.display
/**
 * inline（默认）–内联、none–隐藏、block–块显示、table–表格显示、list-item–项目列表、inline-block
 */

//  4.box-sizing
/**
 * 在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
 * 在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
 * box-sizing有两个值一个是content-box，另一个是border-box。
 * 当设置为box-sizing:content-box时，将采用标准模式解析计算；
 * 当设置为box-sizing:border-box时，将采用怪异模式解析计算。
 */

//  5.BFC
/**
 * BFC规定了内部的Block Box如何布局。
 * 定位方案：
        内部的Box会在垂直方向上一个接一个放置。
        Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
        每个元素的margin box 的左边，与包含块border box的左边相接触。
        BFC的区域不会与float box重叠。
        BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
        计算BFC的高度时，浮动元素也会参与计算。
 * 满足下列条件之一就可触发BFC
        根元素，即html
        float的值不为none（默认）
        overflow的值不为visible（默认）
        display的值为inline-block、table-cell、table-caption
        position的值为absolute或fixed 
*/

//  6.将多个元素设置为同一行?清除浮动有几种方式?
/**
 * 将多个元素设置为同一行：float，inline-block 
 * 清除浮动的方式：
 * 方法一：添加新的元素 、应用 clear：both；
 * 方法二：父级div定义 overflow: hidden；
 * 方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
        .clear{zoom:1;}
        .clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
 */

//  7.viewport 所有属性
/**
 * (1)width :设置layout viewport的宽度，为一个正整数，或字符串'device-width';
 * (2)initial-scale:设置页面的初始缩放值，为一个数字，可以带小数。
 * (3)minimum-scale:允许用户的最小缩放值，为一个数字，可以带小数。
 * (4)maximum-scale:允许用户的最大缩放值，为一个数字，可以带小数。
 * (5)height:设置layout viewport的高度，这个属性对我们并不重要，很少使用
 * (6)user-scalable:是否允许用户进行缩放，值为‘no’或者‘yes’。安卓中还支持：target-densitydpi，表示目标设备的密度等级，作用是决定css中的1px 代表多少物理像素
 * (7)target-densitydpi:值可以为一个数值或者 high-dpi 、 medium-dpi、 low-dpi、 device-dpi 这几个字符串中的一个
 */

//  8.a点击出现框
/**
 * a,a:hover,a:active,a:visited,a:link,a:focus{ 
 -webkit-tap-highlight-color:rgba(0,0,0,0);
 -webkit-tap-highlight-color: transparent;
 outline:none;background: none;
 text-decoration: none;border:none;
 -webkit-appearance: none; }
 */